<template>
  <ma-crud ref="crudRef" :columns="columns" :options="crud">
    <template #search-menuName="{ searchForm, component }">
      <a-input
        v-model.trim="searchForm[component.dataIndex]"
        :style="{ width: '240px' }"
        allow-clear
        placeholder="请输入菜单名称"
      >
        <template #prefix>
          <icon-search />
        </template>
      </a-input>
    </template>
    <template #icon="{ record }">
      <a-tag v-if="record.icon" color="arcoblue">
        <template #icon>
          <icon :icon="record.icon" style="font-size: 15px" />
        </template>
      </a-tag>
    </template>
  </ma-crud>
</template>

<script lang="ts" name="Menu" setup>
import { addMenu, delMenu, listMenu, updateMenu } from "@/api/system/menu";
import { DeptVO } from "@/api/system/dept/types";
import menuIcon from "@/views/system/menu/components/menu-icon.vue";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const crud = reactive({
  id: "menuId",
  pk: "menuId",
  title: "菜单查询",
  formLayout: "horizontal",
  formOption: {
    width: 700,
    labelAlign: "left",
    layout: [
      {
        formType: "grid",
        gutter: 16,
        cols: [
          { span: 24, formList: [{ dataIndex: "menuType" }] },
          { span: 12, formList: [{ dataIndex: "menuName" }] },
          { span: 12, formList: [{ dataIndex: "parentId" }] },
          { span: 12, formList: [{ dataIndex: "orderNum" }] },
          { span: 12, formList: [{ dataIndex: "icon" }] },
          { span: 12, formList: [{ dataIndex: "path" }] },
          { span: 12, formList: [{ dataIndex: "component" }] },
          { span: 12, formList: [{ dataIndex: "perms" }] },
          { span: 12, formList: [{ dataIndex: "queryParam" }] },
          { span: 12, formList: [{ dataIndex: "isFrame" }] },
          { span: 12, formList: [{ dataIndex: "isCache" }] },
          { span: 12, formList: [{ dataIndex: "visible" }] },
          { span: 12, formList: [{ dataIndex: "status" }] }
        ]
      }
    ]
  },
  api: listMenu,
  showIndex: false,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 200,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" },
  add: { api: addMenu, auth: ["system:menu:add"], text: "新增", show: true },
  delete: { api: delMenu, auth: ["system:menu:delete"], text: "删除", show: true },
  edit: { api: updateMenu, auth: ["system:menu:edit"], text: "编辑", show: true },
  isExpand: true,
  afterRequest: (tableData: any) => {
    // @ts-ignore
    return proxy?.handleTree<DeptVO>(tableData, "menuId");
  }
});
const columns = reactive([
  {
    title: "菜单编号",
    dataIndex: "menuId",
    slotName: "index",
    align: "center",
    hide: true,
    addDisplay: false,
    editDisplay: false
  },
  {
    title: "菜单名称",
    dataIndex: "menuName",
    align: "center",
    search: true,
    commonRules: {
      required: true,
      message: "请输入菜单名称"
    }
  },
  {
    title: "上级菜单",
    dataIndex: "parentId",
    align: "center",
    formType: "tree-select",
    fieldNames: {
      key: "id",
      title: "label",
      children: "children"
    },
    dict: {
      url: "/system/menu/categories/treeSelect",
      props: {
        key: "id",
        title: "label"
      }
    },
    addDefaultValue: 0,
    hide: true
  },
  {
    title: "菜单图标",
    dataIndex: "icon",
    formType: "component",
    align: "center",
    component: shallowRef(menuIcon),
    commonRules: {
      required: true,
      message: "请选择菜单图标"
    },
    addDefaultValue: ""
  },
  {
    title: "路由地址",
    dataIndex: "path",
    align: "center",
    hide: true,
    commonRules: {
      required: true,
      message: "请输入路由地址"
    }
  },
  {
    title: "组件地址",
    dataIndex: "component",
    align: "center"
  },
  {
    title: "权限字符",
    dataIndex: "perms",
    align: "center",
    hide: true
  },
  {
    title: "菜单类型",
    dataIndex: "menuType",
    align: "center",
    formType: "radio",
    checked: true,
    dict: {
      name: "sys_menu_type",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    addDefaultValue: "M",
    onControl: (value: any, maFormObject: any) => {
      const service = maFormObject.getColumnService();
      const dataIndexList = ["icon", "path", "component", "perms", "queryParam", "isFrame", "isCache", "visible"];
      if (value === "M") {
        dataIndexList.map(name => service.get(name).setAttr("display", ["icon", "path", "isFrame", "isCache"].includes(name)));
      } else if (value === "C") {
        dataIndexList.map(name =>
          service
            .get(name)
            .setAttr("display", ["path", "component", "perms", "queryParam", "isFrame", "isCache", "visible"].includes(name))
        );
      } else if (value === "F") {
        dataIndexList.map(name => service.get(name).setAttr("display", ["perms"].includes(name)));
      }
    }
  },
  {
    title: "路由参数",
    dataIndex: "queryParam",
    align: "center",
    hide: true
  },
  {
    title: "是否外链",
    dataIndex: "isFrame",
    align: "center",
    formType: "radio",
    dict: {
      name: "sys_yes_no",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    addDefaultValue: 0
  },
  {
    title: "是否缓存",
    dataIndex: "isCache",
    align: "center",
    formType: "radio",
    dict: {
      name: "sys_yes_no",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    hide: true,
    addDefaultValue: 0
  },
  {
    title: "是否隐藏",
    dataIndex: "visible",
    align: "center",
    formType: "radio",
    dict: {
      name: "sys_show_hide",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    hide: true,
    addDefaultValue: 0
  },
  {
    title: "菜单排序",
    dataIndex: "orderNum",
    formType: "input-number",
    align: "center",
    addDefaultValue: 1,
    commonRules: {
      required: true,
      message: "请输入菜单顺序"
    }
  },
  {
    title: "菜单状态",
    dataIndex: "status",
    align: "center",
    formType: "radio",
    dict: {
      name: "sys_normal_disable",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    },
    addDefaultValue: 0
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    addDisplay: false,
    editDisplay: false
  }
]);
</script>
